<template>
  <div id="imgRecognize" style="display: flex">
    <div style="flex: 1;height: 570px">
      <el-card style="height: 100%">
        <el-upload
            class="avatar-uploader"
            name="multipartFile"
            action="http://localhost:8080/user/upload/avatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
          <i v-if="!userAvatar" class="el-icon-plus avatar-uploader-icon el-upload"></i>
          <el-image v-if="userAvatar" :src="userAvatar"
                    class="image-type"></el-image>
        </el-upload>
      </el-card>
    </div>
    <div style="flex: 1;height: 570px">
      <el-card style="height: 50%">
        <div style="height: 200px">
          <h2>图中一共有 {{ faceNum }} 张人脸</h2>
        </div>
      </el-card>
      <el-card style="height: 50%">
        <el-image style="height: 50px;width: 50px;margin-right: 10px" v-for="item in avatar" :key="item"
                  :src="`data:image/jpeg;base64,${item}`"
                  alt="Base64 Image"/>
      </el-card>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";
import {Message} from "element-ui";

export default {
  name: "ImgRecognize",
  data() {
    return {
      userAvatar: '',
      //用于接收返回的图像Base64编码
      avatar: [],
      //用于保存人脸数
      faceNum: 0
    }
  },
  methods: {
    //人脸检测
    detectFace() {
      request.get('/ai/detect', {
        params: {
          path: this.userAvatar
        }
      }).then(res => {
        if (res?.code === 200) {
          this.avatar = res.data
          this.faceNum = res.data.length
        } else {
          Message.error(res?.message)
        }
      })
    },

    //头像上传成功后操作
    handleAvatarSuccess(res) {
      if (res.code === 200) {
        this.userAvatar = res.data
        this.detectFace()
      } else {
        this.$message.error(res.msg)
      }
    },
  }
}
</script>


<style scoped>
/deep/ .el-upload {

}

.image-type {
  width: 500px;
  height: 530px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 530px;
  width: 500px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 530px;
  text-align: center;
}
</style>